<template>
  <div id="yingmoo-index">
    <ym-header></ym-header>
    <div class="yingmoo-index">

      <!-- 导航组件-->
      <ym-navbar></ym-navbar>

      <!-- 轮播组件 -->
      <ym-banner></ym-banner>

      <!-- 鹰目商城 -->
      <ym-store></ym-store>

      <!-- 热点推荐 -->
      <ym-hot></ym-hot>

      <!-- 广告条 -->
      <ym-banner-bar></ym-banner-bar>

      <!-- 鹰目搜索 -->
      <ym-search></ym-search>

      <!-- 案例展示、专题活动 -->
      <div class="yingmoo-column clearfix">
        <div class="yingmoo-scheme left">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">案例展示</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
          </div>
          <ul class="column-content">
            <li v-for="(v,i) in optimize_list" :key='i'>
              <figure><a :href="v.linkurl" target="_blank"><img width="275px" height="177px" :src="v.imgpath" /></a></figure>
            </li>

          </ul>
        </div>
        <div class="yingmoo-scheme right">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">专题活动</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
          </div>
          <ul class="column-content">
            <li v-for="(v,i) in topic_list" :key='i'>
              <figure><a :href="v.linkurl" target="_blank"><img width="275px" height="177px" :src="v.imgpath" /></a></figure>
            </li>

          </ul>
        </div>
      </div>

      <!-- 合作商家、媒体套餐 -->
      <div class="yingmoo-column clearfix">
        <div class="yingmoo-business left">
          <div class="business-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">合作商家</span>
          </div>
          <div class="business-cont">
            <ul class="business-list">
              <li v-for="(v, i) in partner_list" :key="i">
              	<a :href="v.linkurl" target="_blank">
                <figure><img width="179px" height="107px" :src="v.imgpath" /></figure>
                </a>
                <p class="p" :title='v.name'>{{v.name}}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="yingmoo-business right">
          <div class="business-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">媒体套餐</span>
          </div>
          <div class="business-cont">
            <ul class="business-list">
              <li v-for="(v,i) in media_list" :key='i'>


                	<figure>
                		<a :href="v.linkurl" target="_blank"><img width="250px" height="145px" :src="v.imgpath"/></a>
                	</figure>
                <p :title='v.name'>{{v.name}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 行业资讯、企业专访、新闻中心 -->
      <div class="yingmoo-column yingmoo-message">
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">行业资讯</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in information_list" :key="i"><a :href="v.linkurl" target="_blank">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">企业专访</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in interview_list" :key="i"><a :href="v.linkurl">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">新闻中心</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in business_list" :key="i"><a :href="v.linkurl">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 战略合作伙伴 -->
      <ym-partner></ym-partner>


    </div>

    <!-- 底部导航组件 -->
    <ym-footer></ym-footer>
  </div>
</template>

<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymNavbar from "@/components/ymNavbar.vue";
  import ymBanner from "@/components/ymBanner.vue";
  import ymStore from "@/components/ymStore.vue";
  import ymHot from "@/components/ymHot.vue";
  import ymBannerBar from "@/components/ymBannerBar.vue";
  import ymSearch from "@/components/ymSearch.vue";
  import ymPartner from "@/components/ymPartner.vue";
  import ymFooter from "@/components/ymFooter.vue";
  export default {
    name: "yingmoo-index",
    components: {
      ymHeader,
      ymNavbar,
      ymBanner,
      ymStore,
      ymHot,
      ymBannerBar,
      ymSearch,
      ymPartner,
      ymFooter
    },
    mounted() {
			this.getSearchList(7,2);
			this.getSearchList(8,2);
			this.getSearchList(9,6);
			this.getSearchList(10,4);
			this.getSearchList(11,6);
			this.getSearchList(12,6);
			this.getSearchList(13,6);
		},
    data(){
    	return {
    		requestAddr:this.GLOBAL.addr,
    		optimize_list:[],//优化方案
    		topic_list:[],//专题活动
    		partner_list:[],//合作伙伴
    		media_list:[],//媒体套餐
    		information_list:[],//行业资讯
    		interview_list:[],//企业专访
    		business_list:[]//招商合作
    	}
    },
    methods:{
    	getSearchList: function(adid,limit) {
				this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid=' + adid + '&limit='+limit,
					method: 'JSONP',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null) {
						if(adid == 7) {this.optimize_list = res.data;}
						if(adid == 8) {this.topic_list = res.data;}
						if(adid == 9) {this.partner_list = res.data;}
						if(adid == 10) {this.media_list = res.data;}
						if(adid == 11) {this.information_list = res.data;}
						if(adid == 12) {this.interview_list = res.data;}
						if(adid == 13) {this.business_list = res.data;}
					}
				}).catch()
			}
    }
  }
</script>

<style lang="less">

  .el-carousel {
    overflow-y: hidden !important;
  }
  .el-tabs--card>.el-tabs__header {
    background-color: #3fa9f5;
    border-bottom: none;
    margin-bottom: 0;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
    border: none !important;
  }
  .el-tabs__nav-scroll{
    height: 45px;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item {
    width: 155px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border: none !important;
    color: white;
    background-image: url(../assets/ym-index/bg-nav.png);
    background-position: left center;
    background-repeat: no-repeat;
    &:hover {
      background-color: darken(#3fa9f5, 10%);
    }
    &.is-active {
      background-color: darken(#3fa9f5, 10%);
    }
  }

  .yingmoo-column {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 15px;
    position: relative;
    @w: 247px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: @w;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
      .column-subtitle {
        margin-left: @w;
        background-color: #3fa9f5;
        display: flex;
        li {
          width: 136px;
          text-align: center;
          color: #fff;
          font-size: 15px;
          background-image: url(../assets/ym-index/bg-nav.png);
          background-position: left center;
          background-repeat: no-repeat;
          &:last-child {
            border-right: none;
          }
          &:hover {
            background-color: darken(#3fa9f5, 10%);
          }
        }
      }
      .column-more {
        position: absolute;
        right: 1em;
        top: 0;
        background-color: transparent;
        color: #fbb03b;
        font-size: 16px;
        font-weight: 800;
      }
    }
    .column-left {
      width: @w;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
    }
    .column-content {
      background: #fff;
    }
  }

</style>

<style scoped lang="less">
  .yingmoo-index {
    background-color: #f3f9ff;
    background-image: url(../assets/soso/first_img1.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  /* 案例展示、专题活动 */

  .yingmoo-scheme {
    width: 590px;
    &.left {
      float: left;
    }
    &.right {
      float: right;
    }
    .column-content {
      display: flex;
      justify-content: space-between;
      padding: 16px;
      li {
        figure img {
          display: block;
        }
      }
    }
  }

  /* 合作商家、媒体套餐 */

  .yingmoo-business {
    background: #fff;
    width: 590px;
    &.left {
      float: left;
      .business-cont li {
        width: 33.33%;
      }
    }
    &.right {
      float: right;
      .business-cont li {
        width: 50%;
      }
    }
    .business-title {
      background-color: #036eb7;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      background-color: #3fa9f5;
      background-color: #036eb7;
    }
    .business-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      height: 390px;
      li {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        figure img {
          display: block;
        }
        p {
          height: 17px;
          overflow: hidden;
          font-size: 14px;
          padding-top: 8px;
          text-overflow: clip;
        }
        .p{
          margin-top: 20px;
        }
      }
    }
  }

  /* 行业资讯、企业专访、新闻中心 */

  .yingmoo-message {
    display: flex;
    justify-content: space-between;
    .message-item {
      width: 390px;
      height: 250px;
      .message-title {
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        background-color: #3fa9f5;
        .column-icon {
          margin-right: 5px;
        }
      }
      .message-cont {
        background: #fff;
        .message-list {
          padding: 0.5em 0;
          li {
            line-height: 2;
            padding-left: 14px;
            color: #333333;
            cursor: pointer;
            a{
              font-size: 14px;
            }
          }
        }
      }
    }
  }

</style>
